<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>vue中使用animate.css库</title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<link href="https://cdn.bootcss.com/animate.css/3.7.2/animate.css" rel="stylesheet">
		<script src="https://cdn.bootcss.com/velocity/2.0.5/velocity.js"></script>
<style>
			.fade-enter,.fade-leave-to{
				opacity: 0;
			} 
			.fade-enter-active,.fade-leave-active{
				transition:opacity 1s;
			}
</style>
	</head>
	<body>
		
		<div id="root">
			<transition-group name="fade">
				<div v-for="item of list" :key="item.id">	
					{{item.title}}
				</div>			
			</transition-group>
			<!-- <div v-for="(item,index) of list" :key="index"> -->

			<button @click="handleBtnClick">add</button>
		</div>
	<script type="text/javascript">	
		var count=0;
		var app=new Vue({
			el:'#root',
			data:{
                list:[

				]
			},
			methods: {
				handleBtnClick:function(){
					this.list.push({
						id:count++,
						title:'hello world'
					})
				},
			},
		})
		
	</script>
	</body>
</html>
